<template>
  <section class="section-case">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="sr-sidebar bg-light">
            <!-- form -->
            <!-- 
              <div class="sr-txt-title">
              <h2 class="sr-txt-h2">Search</h2>
            </div>
            <div class="search-form">
              <form class="">
                <div class="input-group mb-3">
                  <input
                    type="text"
                    placeholder="Keyword"
                    aria-describedby="button-addon2"
                    v-model="params.search"
                  />
                  <button
                    class="btn btn-outline-secondary"
                    type="button"
                    id="button-addon2"
                    @click.prevent="methods.onSearch"
                  >
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </form>
            </div> 
            -->

            <!-- 分类列表 -->
            <div class="sr-txt-title">
              <h2 class="sr-txt-h2">Product Groups</h2>
            </div>
            <ul class="sr-side-proGroup-list">
              <template
                v-for="(item, index) in productCategoryTreeList"
                :key="index"
              >
                <template v-if="item.children && item.children.length > 0">
                  <li class="sr-side-proGroup-rightSpace">
                    <a
                      :title="$wordpressDecodeHTML(item.name)"
                      @click="changeCategory(item.id)"
                    >
                      {{ $wordpressDecodeHTML(item.name) }}
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </a>
                    <ol class="sr-side-proGroup-sublist">
                      <template
                        v-for="(child, index) in item.children"
                        :key="index"
                      >
                        <li>
                          <a
                            :title="$wordpressDecodeHTML(child.name)"
                            @click="changeCategory(child.id)"
                          >
                            {{ $wordpressDecodeHTML(child.name) }}
                          </a>
                        </li>
                      </template>
                    </ol>
                  </li>
                </template>
                <template v-else>
                  <li>
                    <a
                      :title="$wordpressDecodeHTML(item.name)"
                      @click="changeCategory(item.id)"
                    >
                      {{ $wordpressDecodeHTML(item.name) }}
                    </a>
                  </li>
                </template>
              </template>
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <!--  -->
          <div class="product-list">
            <div class="row row-cols-1 row-cols-md-3 g-4">
              <template v-for="(item, index) in result.list" :key="index">
                <div class="col">
                  <div class="card h-100">
                    <!-- <img :src="require('@/assets/image/blog-banner.jpg')" class="card-img-top" alt="..." /> -->
                    <a-image
                      class="card-img-top"
                      style="height: 20vh"
                      :src="
                        $getImgUrlFromMediaById(item.featured_media_src_url)
                          ? $getImgUrlFromMediaById(item.featured_media_src_url)
                          : '/#'
                      "
                      fallback=""
                    />
                    <div class="card-body">
                      <h5
                        class="card-title"
                        :title="$wordpressDecodeHTML(item.title.rendered)"
                        @click="jumpDetail(item.id)"
                      >
                        {{ $wordpressDecodeHTML(item.title.rendered) }}
                      </h5>
                      <!-- 
                    <p class="card-text">
                    {{ $deleteHtmlTag(item.excerpt.rendered) }}
                  </p> 
                  -->
                    </div>
                  </div>
                </div>
              </template>
              <!-- 分页 -->
              <div
                class="col-md-12 d-flex justify-content-center"
                style="margin-top: 30px"
              >
                <a-pagination
                  v-model:current="params.page"
                  v-model:pageSize="params.per_page"
                  :total="result.total"
                  show-less-items
                  @change="onPageChange"
                />
              </div>
              <!--  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getArticleList, getCategoryList, toTree } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

export default {
  name: "ServiceIndex",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      productCategoryList: null,
      params: {
        page: 1,
        per_page: 18,
        categories: 27,
        // search: computed(() => (proxy.$route.query.keyword ? proxy.$route.query.keyword : "")),
      },
      result: {
        list: [],
        total: 0,
      },
      allCategoryList: computed(() => proxy.$store.getters.allCategoryList),
      productCategoryTreeList: computed(() => {
        if (proxy.$store.getters.allCategoryList == null) {
          return [];
        }
        var productCategoryTreeList = toTree(
          proxy.$store.getters.allCategoryList
        ).find((item) => item.id == 27);
        return productCategoryTreeList ? productCategoryTreeList.children : [];
      }),
    });
    const refData = toRefs(data);
    onBeforeMount(async () => {
      var params = {
        parent: 27,
        per_page: 99,
      };
      let res = await getCategoryList(params);
      data.productCategoryList = res.data;
      await methods.getList();
    });
    onMounted(() => {});
    //
    const methods = {
      getList() {
        getArticleList(data.params).then((res) => {
          // 获取总数
          let headers = res.headers;
          data.result.total = parseInt(headers["x-wp-total"]);
          //
          data.result.list = res.data;
        });
      },
      onPageChange(pageNumber) {
        data.params.page = pageNumber;
        methods.getList();
      },
      changeCategory(id) {
        data.params.categories = id;
        data.params.page = 1;
        this.getList();
      },
      jumpDetail(id) {
        proxy.$router.push(`/product/detail/${id}`);
      },
    };
    //
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
// 查询输入框
.search-form {
  form {
    position: relative;
  }

  form input[type="text"] {
    border-radius: 4px;
    font-size: 1rem;
    border: 1px solid #ddd;
    width: 100%;
    padding: 0.5rem 0.5rem;
  }

  button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    font-size: 1rem;
    padding: 0 15px;
    margin: -1px;
    background: #68a4c4;
    color: #fff;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    line-height: 0;
    border: 1px solid #ddd;
  }
}

.sr-sidebar {
  padding: 20px 20px;
  width: 80%;

  .sr-txt-title {
    margin-bottom: 20px;
  }

  .sr-txt-h2 {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    word-break: break-word;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sr-side-proGroup-list {
    li {
      position: relative;

      a {
        line-height: 21px;
        padding: 10px 0;
        color: #000;
        font-size: 14px;
        text-decoration: none;
        display: block;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }

      .icon-lock {
        margin-top: -2px;
        color: #888;
      }
    }
  }

  .sr-side-proGroup-list li:hover {
    background: #e6ecf2;
  }
  .sr-side-proGroup-list li:hover > .sr-side-proGroup-sublist {
    display: block;
  }

  .sr-side-proGroup-list li.selected {
    background: #e6ecf2;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace {
    position: relative;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace > a {
    padding-right: 56px;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace i {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  .sr-side-proGroup-more {
    margin-top: 20px;
  }
  .sr-side-proGroup-sublist {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -11px;
    border: 1px solid #ced3d9;
    background: #fff;
    z-index: 99;
    padding: 10px 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .sr-side-proGroup-sublist li a {
    padding: 10px 20px;
    white-space: nowrap;
  }
  .sr-side-proGroup-sublist li.sr-side-proGroup-rightSpace > a {
    padding-right: 46px;
  }
  .sr-side-proGroup-sublist li.sr-side-proGroup-rightSpace i {
    right: 20px;
  }
}

.section-case {
  padding: 100px 0;

  ul.category {
    width: 100%;

    li {
      width: 20%;
    }
  }

  .product-list {
    // margin-top: 50px;
  }

  .card {
    .card-title {
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
